<template>
  <div class="width-style article">
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="grid-content">
          <div class="article-title">
            {{ $store.state.article.article.title }}
          </div>
          <div class="article-info">
            <span>作者：{{ $store.state.article.article.authorName }}</span>
            <span
              >文章类型：{{
                $store.state.article.article.artType === "0" ? "原创" : "转载"
              }}</span
            >
            <span
              >发布时间：{{ $store.state.article.article.publishTime }}</span
            >
            <span>浏览次数：{{ $store.state.article.article.hits }}</span>
            <span
              class="edit-article"
              @click="editArticle($store.state.article.artId)"
              >修改文章</span
            >
          </div>
          <!-- <div class="link"></div> -->
          <div class="article-content">
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="grid-content content-left">本文分类：</div>
              </el-col>
              <el-col :span="20">
                <div class="grid-content key-word-all">
                  <span>{{ $store.state.article.article.catalogueName }}</span>
                  <!-- <el-button type="primary" class="key-word">呼吸</el-button>
                  <el-button type="primary" class="key-word">发烧</el-button>
                  <el-button type="primary" class="key-word">咽炎</el-button> -->
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="grid-content content-left">正文：</div>
              </el-col>
              <el-col :span="20">
                <div class="grid-content">
                  <p
                    class="content-text"
                    v-html="$store.state.article.article.content"
                  ></p>
                </div>
              </el-col>
            </el-row>
            <!-- <el-row :gutter="20">
              <el-col :span="4">
                <div class="grid-content content-left">小编提示：</div>
              </el-col>
              <el-col :span="20">
                <div class="grid-content">
                  <div class="tips">本文很棒哦</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="grid-content content-left">文章类型：</div>
              </el-col>
              <el-col :span="20">
                <div class="grid-content">
                  <div class="type">转载</div>
                </div>
              </el-col>
            </el-row> -->
          </div>
          <!-- 点赞收藏评论分享-->
          <div class="comment">
            <!-- 点赞 -->
            <span v-show="isGood" @click="changeGood" class="good-group">
              <span class="iconfont icon icon-good icon-green"> &#xec8c; </span>
              <span>{{ $store.state.article.article.likes }}</span>
            </span>
            <span v-show="!isGood" @click="changeGood" class="good-group">
              <span class="iconfont icon icon-good icon-grey"> &#xec8c; </span>
              <span>{{ $store.state.article.article.likes }}</span>
            </span>
            <!-- 评论 -->
            <span class="comment-group">
              <span class="iconfont icon icon-grey icon-comment">&#xe624;</span>
              <span>{{ $store.state.article.commentsNum }}</span>
            </span>
            <!-- 收藏 -->
            <span
              class="collect-group"
              v-show="isCollect"
              @click="changeCollect"
            >
              <span class="iconfont icon icon-collect icon-green"
                >&#xe666;</span
              >
              <span>{{ $store.state.article.article.favorites }}</span>
            </span>
            <span
              class="collect-group"
              v-show="!isCollect"
              @click="changeCollect"
            >
              <span class="iconfont icon icon-grey icon-collect">&#xe666;</span>
              <span>{{ $store.state.article.article.favorites }}</span>
            </span>
            <el-popover
              class="share-group"
              placement="top-start"
              width="250"
              trigger="hover"
              slot
            >
              <div class="img-GRCode" style="fontweight: 700">
                扫一扫，分享内容
              </div>
              <qriously :size="138" class="img-GRCode" :value="href" />
              <div class="link-href">
                <el-input
                  v-model="href"
                  :disabled="true"
                  class="href-input"
                  size="small"
                >
                </el-input>
                <el-button type="primary" class="copy-button" @click="copyHref"
                  >复制</el-button
                >
              </div>
              <span class="iconfont icon icon-grey" slot="reference">
                &#xe63e;
              </span>
              <!-- <el-button slot="reference" class="share-btn">
                <span class="iconfont icon icon-grey"> &#xe63e; </span>
              </el-button> -->
            </el-popover>
            <!-- <span class="share-group">
              <span class="iconfont icon icon-grey"> &#xe63e; </span>
            </span> -->
          </div>
          <!-- 评论区 -->
          <!-- 发表评论 -->
          <div v-if="!$store.state.user.isLogin" class="mention">
            请<span class="green">登录</span>后发表评论
          </div>
          <div class="input-comment" v-if="$store.state.user.isLogin">
            <div class="comment-title">参与评论</div>
            <el-row :gutter="20">
              <el-col :span="2">
                <div class="grid-content content-left">
                  <img :src="$store.state.user.avatar" class="img-face" />
                </div>
              </el-col>
              <el-col :span="19">
                <div class="grid-content">
                  <div class="comment-content">
                    <el-form ref="form" :model="commentForm">
                      <el-form-item>
                        <el-input
                          type="textarea"
                          v-model="commentForm.content"
                          placeholder="请文明发表有价值的评论，良好的交流氛围需要大家一起维护"
                          maxlength="100"
                          show-word-limit
                        >
                        </el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
              </el-col>
              <el-col :span="1">
                <div class="grid-content">
                  <el-button
                    type="primary"
                    class="submit-comment green-button"
                    @click="sendComment"
                    >发布</el-button
                  >
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- 已有评论 -->
          <!-- <CommentTree :comments="comments" level="0" /> -->
          <Comments :comments="$store.state.article.comments" />
          <!-- <Comments :comments="comments" /> -->
          <!-- 反馈 -->
          <div class="correction-all">
            <span class="correction" @click="goFeedBack">内容纠错</span>
            <span class="correction" @click="goFeedBack">板块纠错</span>
          </div>
          <!-- 广告图片 -->
          <!-- <div class="img-show">
            <img src="@/assets/images/logo.jpg" class="img" />
            <img src="@/assets/images/logo.jpg" class="img" />
            <img src="@/assets/images/logo.jpg" class="img" />
          </div> -->
        </div>
      </el-col>
      <el-col :span="6" :offset="6">
        <!-- <div class="grid-content article-ranking">
          <div class="article-ranking-title">相同板块热门文章排名</div>
          <div class="article-ranking-all">
            <div class="article-ranking-content">
              <span class="iconfont icon-point">&#xe757;</span>
              <span class="article-ranking-text">
                你哭着对我说，童话里的故事
              </span>
              <span class="iconfont icon-hot">&#xe619;</span>
              <span class="hot-number">6666</span>
            </div>
          </div>
        </div> -->
        <NewsSection
          :newsList="$store.state.home.newsList"
          style="backgroundcolor: rgba(37, 182, 160, 0.3)"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Comments from "@/components/comments.vue";
import { renderTime } from "@/utils/tools.js";
import { Message } from "element-ui";
import NewsSection from "@/components/newsSection";
export default {
  layout: "personalCenterLayout",
  components: { Comments, NewsSection },
  data() {
    return {
      test: "",
      imgsrc: "../../assets/images/face.jpg",
      href: "", //当前路径
      isLogin: false, //是否登录
      //是否点赞
      isGood: false,
      //是否收藏
      isCollect: false,
      //输入的评论
      commentForm: {
        content: "",
      },
      user: {
        userName: "",
        userId: "",
        avatar: "",
      },
    };
  },
  // directives: { clickoutside },
  methods: {
    // 去反馈中心
    goFeedBack() {
      if (this.$cookies.get(this.$api.TOKENKEY)) {
        let link = this.$router.resolve({
          path: "/feedback",
        });
        window.open(link.href, "_blank");
      } else {
        message({
          message: "未登录或者登录状态已过期，清重新登录",
          type: "error",
          duration: 1000,
        });
      }
    },
    //点赞/取消点赞
    async changeGood() {
      let goodRes, userId, artId;
      if (this.isGood) {
        userId = this.$store.state.user.userId;
        artId = this.$store.state.article.artId;
        goodRes = await this.$api.reqCancelLikes(userId, artId);
      } else {
        userId = this.$store.state.user.userId;
        artId = this.$store.state.article.artId;
        goodRes = await this.$api.reqLikes({
          userId: userId,
          artId: artId,
        });
      }
      if (goodRes.code === 200) {
        this.isGood = !this.isGood;
        //重新获取点赞数
        let articleRes = await this.$api.reqArticle(
          this.$store.state.article.artId
        );
        if (articleRes.code === 200) {
          let articleData = articleRes.data;
          articleData.publishTime = renderTime(articleData.publishTime);
          //写入文章信息
          this.$store.commit("article/SET_ARTICLE", articleData);
        }
      }
    },
    //收藏/取消收藏
    async changeCollect() {
      let collectRes, userId, artId;
      if (this.isCollect) {
        userId = this.$store.state.user.userId;
        artId = this.$store.state.article.artId;
        collectRes = await this.$api.reqCancelCollect(userId, artId);
      } else {
        userId = this.$store.state.user.userId;
        artId = this.$store.state.article.artId;
        collectRes = await this.$api.reqCollect({
          userId: userId,
          artId: artId,
        });
      }
      if (collectRes.code === 200) {
        this.isCollect = !this.isCollect;
        //重新获取收藏数
        let articleRes = await this.$api.reqArticle(
          this.$store.state.article.artId
        );
        if (articleRes.code === 200) {
          let articleData = articleRes.data;
          articleData.publishTime = renderTime(articleData.publishTime);
          //写入文章信息
          this.$store.commit("article/SET_ARTICLE", articleData);
        }
      }
    },
    //发送评论（对文章）
    async sendComment() {
      if (!this.commentForm.content) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "发表的评论不能为空",
        });
      } else {
        let input = this.commentForm.content;
        // let timeNow = new Date().getTime();
        // let time = this.dateStr(timeNow);
        let res = await this.$api.addComments({
          artId: this.$store.state.article.artId,
          comment: input,
          userId: this.$store.state.user.userId,
        });
        if (res.code === 200) {
          this.$message({
            showClose: true,
            type: "success",
            message: "评论成功",
          });
          this.commentForm.content = "";
          //获取文章评论
          let commentRes = await this.$api.reqArticleComments(
            this.$store.state.article.artId
          );
          if (commentRes.code === 200) {
            //写入文章评论总数
            this.$store.commit("article/SET_COMMENTSNUM", commentRes.total);
            //更改数组中的时间格式
            for (let item of commentRes.rows) {
              item.time = renderTime(item.time);
              item.avatar = this.$api.BASEURL + item.avatar;
            }
            //写入文章评论数组
            this.$store.commit("article/SET_COMMENTS", commentRes.rows);
          }
        }
      }
    },
    //复制链接
    copyHref() {
      this.$copyText(this.href);
    },
    //修改文章
    editArticle(artId) {
      if (this.$cookies.get(this.$api.TOKENKEY)) {
        let link = this.$router.resolve({
          path: "/writing",
          query: { artId: artId },
        });
        window.open(link.href, "_blank");
      } else {
        Message({
          message: "未登录或者登录状态已过期，清重新登录",
          type: "error",
          duration: 1000,
        });
      }
    },
  },
  async asyncData({ app, store, route }) {
    let good = false,
      collect = false;
    store.commit("article/SET_ARTID", route.query.artId);
    if (app.$cookies.get(app.api.TOKENKEY)) {
      //写入token
      store.commit("user/SET_LOGIN", true);
      let userRes = await app.api.reqUserInfo({});
      if (userRes.code === 200) {
        store.commit("user/SET_AVATAR", app.api.BASEURL + userRes.user.avatar);
        store.commit("user/SET_USERID", userRes.user.userId);
        store.commit("user/SET_USERNAME", userRes.user.userName);
      }
      //获取点赞、收藏状态
      let likeRes = await app.api.reqIsLike(
        store.state.user.userId,
        store.state.article.artId
      );
      let collectRes = await app.api.reqIsCollect(
        store.state.user.userId,
        store.state.article.artId
      );

    if (likeRes.code === 200) {
      if (likeRes.msg === "false") {
        good = false;
      } else {
        good = true;
      }
    }
    if (collectRes.code === 200) {
      if (collectRes.msg === "false") {
        collect = false;
      } else {
        collect = true;
      }
    }
    }
    //获取文章评论
    let commentRes = await app.api.reqArticleComments(
      store.state.article.artId
    );
    // console.log("我是评论数组", commentRes);
    if (commentRes.code === 200) {
      //写入文章评论总数
      store.commit("article/SET_COMMENTSNUM", commentRes.total);
      //更改数组中的时间格式
      for (let item of commentRes.rows) {
        item.time = renderTime(item.time);
        item.avatar = app.api.BASEURL + item.avatar;
      }
      //写入文章评论数组
      store.commit("article/SET_COMMENTS", commentRes.rows);
    }
    //获取文章
    let articleRes;
    //如果是新闻
    if (route.query.isNews) {
      articleRes = await app.api.reqNewsDetail(store.state.article.artId);
    } else {
      articleRes = await app.api.reqArticle(store.state.article.artId);
    }
    if (articleRes.code === 200) {
      let articleData = articleRes.data;
      articleData.publishTime = renderTime(articleData.publishTime);
      //写入文章信息
      store.commit("article/SET_ARTICLE", articleData);
    }
    //获取新闻列表
    let newsRes = await app.api.reqNews();
    if (newsRes.code === 200) {
      //更改数组中的时间格式，图片地址
      for (let item of newsRes.rows) {
        item.publishTime = renderTime(item.publishTime);
        item.thumbnail = app.api.BASEURL + item.thumbnail;
      }
      store.commit("home/SETNEWSLIST", newsRes.rows);
    }
    
    return {
      isGood: good,
      isCollect: collect,
    };
  },
  mounted() {
    this.href = window.location.href;
  },
};
</script>

<style scoped lang="less">
.green {
  color: @themeColor;
}
.mention {
  font-size: 18px;
  padding-top: 10px;
  margin-bottom: 20px;
  font-weight: 700;
}
.el-popover {
  text-align: center;
  margin-right: 5px;
  .img-GRCode {
    // width: 150px;
    // height: 150px;
    text-align: center;
  }
  .copy-link {
    cursor: pointer;
    text-align: center;
    &:hover {
      color: @themeColor;
    }
  }
  .link-href {
    text-align: center;
    .href-input {
      width: 150px;
    }
    .copy-button {
      margin-top: 5px;
      width: 50px;
      height: 25px;
    }
  }
}
.icon-grey {
  color: #c1c1c1;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.article {
  padding-top: 20px;
  margin-bottom: 20px;
  .article-title {
    font-size: 26px;
  }
  .article-info {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    margin-top: 40px;
    margin-bottom: 30px;
    .edit-article {
      cursor: pointer;
      font-weight: 700;
      &:hover {
        color: @themeColor;
      }
    }
  }
  // .link {
  //   margin-top: 20px;
  //   text-align: right;
  //   .icon {
  //     font-size: 24px;
  //     cursor: pointer;
  //   }
  //   .icon-weibo {
  //     font-size: 24px;
  //     &:hover {
  //       color: #f56467;
  //     }
  //     &::before {
  //       display: none;
  //     }
  //   }
  //   .icon-weixin {
  //     &:hover {
  //       color: #3fcf77;
  //     }
  //     &::before {
  //       display: none;
  //     }
  //   }
  //   .icon-qq {
  //     &:hover {
  //       color: #369bce;
  //     }
  //   }
  // }
  .article-content {
    .key-word-all {
      text-align: left;
      .key-word {
        padding: 5px;
        border-radius: 5px;
        font-size: 14px;
      }
    }
    .content-left {
      text-align: right;
      font-size: 14px;
    }
    .content-text {
      text-align: left;
      font-size: 16px;
    }
    .tips {
      font-size: 14px;
      text-align: left;
    }
    .type {
      font-size: 14px;
      text-align: left;
    }
  }
  .comment {
    text-align: right;
    border-bottom: 1px solid @themeColor;
    .icon {
      font-size: 24px;
      cursor: pointer;
      &:hover {
        color: @themeColor;
      }
    }
    .icon-good {
      font-size: 28px;
    }
    .icon-green {
      color: @themeColor;
    }
    .good-group {
      margin-right: 20px;
      font-size: 14px;
      color: #c1c1c1;
    }
    .comment-group {
      font-size: 14px;
      color: #c1c1c1;
      margin-right: 20px;
    }
    .icon-comment {
      margin-right: 5px;
    }
    .collect-group {
      margin-right: 20px;
      font-size: 14px;
      color: #c1c1c1;
      .icon-collect {
        margin-right: 5px;
      }
    }
    .img-GRCode {
      width: 10px;
      height: 150px;
    }
    .share-group {
      margin-right: 5px;
      font-size: 28px;
    }
  }
  .input-comment {
    margin-bottom: 20px;
    margin-top: 20px;
    border-bottom: 1px solid #dcdfe6;
    padding-bottom: 20px;
    .comment-title {
      font-size: 18px;
      text-align: left;
      margin-top: 10px;
      padding-top: 10px;
      margin-bottom: 20px;
    }
    .img-face {
      width: 40px;
      height: 40px;
      border-radius: 20px;
    }
    .submit-comment {
      width: 50px;
      height: 30px;
    }
  }
  .correction-all {
    text-align: right;
    margin-top: 30px;
    .correction {
      color: @themeColor;
      padding-right: 20px;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .img-show {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .img {
      width: 200px;
      height: 150px;
    }
  }
  .article-ranking {
    .article-ranking-title {
      font-size: 18px;
      padding-bottom: 10px;
    }
    .article-ranking-all {
      padding: 5px;
      background: rgba(37, 182, 160, 0.3);
      .article-ranking-content {
        margin-top: 10px;
        .icon-point {
          color: #e1e1e1;
        }
        .article-ranking-text {
          display: inline-block;
          width: 185px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: bottom;
          cursor: pointer;
          &:hover {
            color: @themeColor;
          }
        }
        .icon-hot {
          margin-left: 10px;
          color: #ed4c52;
        }
        .hot-number {
          font-size: 14px;
        }
      }
    }
  }
}
</style>